<template>
    <div class="biankuang">
        <div class="allCompany">
            <div class="allCompany_up_flex">
                <div class="allCompany_up">
                    <button type="button" class="btn btn-success" @click="init(1)">所有公司</button>
                    <a v-link="{ path: '/index/addCompany' }" type="button" class="btn btn-success">添加公司</a>
                    <button type="button" class="btn btn-success">批量添加公司</button>
                </div>
                <div class="allCompany_up">
                    <div class="input-radio">
                        <input type="radio" id="2" checked="checked" value="2" v-model="search_id">
                        <label for="2">企业名</label>
                        <input type="radio" id="3" value="3" v-model="search_id">
                        <label for="3">注册号</label>
                        <input type="radio" id="4" value="4" v-model="search_id">
                        <label for="4">地址</label>
                        <input type="radio" id="5" value="5" v-model="search_id">
                        <label for="5">经营范围</label>
                    </div>
                    <input type="text" class="form-control search-input" v-model="search_text">
                    <button type="button" class="btn btn-success search-button" @click="init(search_id,search_text)">搜索</button>
                    <div style="clear: both"></div>
                </div>
            </div>

            <div class="table-component">
                <gridtable :data="gridData" :columns="gridColumns" :columns-desc="columnsDesc"
                           :filter-key="searchQuery"></gridtable>
            </div>

            <div class="allCompany_down_flex">
                <button type="button" class="allCompany_down_margin btn btn-success" @click="nextPage(1)">首页</button>
                <button type="button" class="allCompany_down_margin btn btn-success" @click="nextPage(2)">上一页</button>
                <button type="button" class="allCompany_down_margin btn btn-success" @click="nextPage(3)">下一页</button>
                <button type="button" class="allCompany_down_margin btn btn-success" @click="nextPage(4)">尾页</button>
                <span class="panel panel-default page-info" style="font-size: 20px;">每页 15 条，当前页：{{page}}， 总页数： {{count}}</span>
                <input type="search" class="form-control" style="width: 70px;" placeholder="输入..." v-model="go">
                <button type="button" class="allCompany_down_margin btn btn-success" @click="setData(go,15)">跳转</button>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                searchQuery: '',
                gridColumns: ['id', 'No', 'epname', 'regcode', 'address', 'runscope', 'mobiletele', 'legalperson', 'action'],
                columnsDesc: [
                    {name: '企业id', width: '0px', display: 'none'},
                    {name: '序号', width: '50px', display: null},
                    {name: '企业名', width: '200px', display: null},
                    {name: '注册号', width: '200px', display: null},
                    {name: '地址', width: '300px', display: null},
                    {name: '经营范围', width: '300px', display: null},
                    {name: '联系方式', width: '200px', display: null},
                    {name: '法律代表人', width: '100px', display: null},
                    {name: '操作', width: '300px', display: null}
                ],
                gridData: [],
                remoteData: [],
                page: 1,
                rows: 15,
                count: 0,
                rightWidHei: {
                    width: ($(window).width() - 202) + 'px',
                    height: ($(window).height() - 53) + 'px'
                },
                search_id: 2,
                search_text: ''
            }
        },
        components: {
            'gridtable': require('../components/gridTemplate.vue')
        },
        created: function () {
            // 初始化数据 表格数据 （ 1：查找全部，2：根据企业名，3：根据企业注册号，4：根据企业地址，5：根据企业经营范围）
            this.init(1);
        },
        methods: {
            init: function (choice, key) {
                var _this = this;
                var opsition = {};
                if (choice == 1) {
                    opsition = {"choice": choice}
                }
                if (choice == 2) {
                    opsition = {"choice": choice, "epname": key}
                }
                if (choice == 3) {
                    opsition = {"choice": choice, "regcode": key}
                }
                if (choice == 4) {
                    opsition = {"choice": choice, "address": key}
                }
                if (choice == 5) {
                    opsition = {"choice": choice, "runscope": key}
                }
                // 选择全部 （ 1：查找全部，2：根据企业名，3：根据企业注册号，4：根据企业地址，5：根据企业经营范围）
                $.post('/Enterprise/choice', opsition).then(function (data) {
                    var temp = data.content.count / 15;
                    _this.count = parseInt(temp);
                    if (temp > _this.count) {
                        _this.count++;
                    }
                    _this.page = 1;
                    _this.rows = 15;
                    // 保存到全局变量
                    _this.remoteData = data.content.list;
                    // 处理数据
                    _this.setData(_this.page, _this.rows);
                });
            },
            nextPage: function (sw) {
                var _this = this;
                switch (sw) {
                    case 1:
                        _this.page = 1;
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 2:
                        if (_this.page > 1) {
                            _this.page--;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 3:
                        if (_this.page < _this.count) {
                            _this.page++;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 4:
                        _this.page = _this.count;
                        _this.setData(_this.page, _this.rows);
                        break;
                }
            },
            setData: function (page, rows) {
                var _this = this;
                var list = _this.remoteData;
                // 清空当前数据
                _this.gridData = [];
                if( page < 1 ){ page = 1; }
                if( page > _this.count ){ page = _this.count; }

                var index = (page - 1) * rows;
                // 每页15条记录
                for (var i = index; i < list.length && i < (index + rows); i++) {
                    var obj = {
                        id: list[i].id,
                        No: i + 1,
                        epname: list[i].epname,
                        regcode: list[i].regcode,
                        address: list[i].address,
                        runscope: list[i].runscope,
                        mobiletele: list[i].mobiletele + " / " + list[i].cellphone,
                        legalperson: list[i].legalperson,
                        action: {
                            edit: '/index/addCompany/'+list[i].id,
                            del: '/Enterprise/deleteEnterprise',
                            detail: '/index/companyInfo/'+list[i].id,
                            createCode: '/index/codeHistory/'+list[i].id
                        }
                    };
                    _this.gridData.push(obj);
                }
            }
        }
    }
</script>

<style>
    .biankuang {
        background-color: #FFFFFF;
        border: 1px #1e88e5 solid;
        border-radius: 5px;
        padding: 10px;
    }

    .allCompany_up_flex {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }

    .allCompany_down_flex {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .allCompany_down_margin {
        margin-right: 20px;
        margin-left: 20px;
    }

    .allCompany .table-component {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .allCompany .input-radio {
        float: left;
        line-height: 30px;
        margin-right: 10px;
    }

    .allCompany .search-input {
        float: left;
        width: 200px;
        height: 30px;
    }
    .allCompany .search-button {
        float: left;
        height: 30px;
        margin: 0 5px;
    }
    .allCompany .page-info {
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 0px;
        margin-right: 15px;
        line-height: 35px;
    }
</style>
